<template>
  <div class="merchant-pay">
    <v-title :title="$route.meta.title" />
    <loading :show="loading" />
    <arrow />
    <div class="pay shadow">
      <div class="title">{{ merchant.name }}</div>
      <div class="amount">
        <span class="text">支付金额:</span>
        <span class="value">
          <cube-input type="text" v-model="amount" ref="amount" />
        </span>
      </div>
      <div class="submit" :class="{'disabled': disabled}" @click="submit">立即支付</div>
      <p class="mini">最低支付金额: ￥{{ mini }}</p>
      <div class="desc">
        <p>联系方式:</p>
        <p>电话: {{ merchant.mobile }}</p>
        <!-- <p>昵称: {{ merchant.nickname }}</p>-->
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Loading from '@/components/Loading'
import Arrow from '@/components/Arrow'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'MerchantPay',
  components: {
    'v-title': Title,
    Loading,
    Arrow
  },
  data() {
    return {
      loading: false,
      merchantId: 0,
      merchant: {},
      mini: 0,
      amount: 100,
      disabled: false,
      // available ticket
      ticket: 0
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      api.Merchant.fetch({ id: this.merchantId }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.merchant = data.merchant
        this.mini = +data.mini
        this.ticket = +data.ticket
      }).finally(() => {
        this.loading = false
      })
    },
    // check cash password
    checkPayPassword() {
      this.$createDialog({
        type: 'prompt',
        title: '支付密码',
        prompt: {
          placeholder: '请输入支付密码',
          type: 'password',
          eye: false,
          clearable: true
        },
        onConfirm: (e, value) => {
          if (value === undefined) {
            return this.$createToast({
              type: 'error',
              time: 1000,
              txt: '请输入支付密码',
            }).show()
          }
          api.User.payPassword({ password: value }).then(() => {
            this.save()
          }).catch(err => {
            this.$createToast({
              type: 'error',
              time: 3000,
              txt: err.message
            }).show()
            return false
          })
        }
      }).show()
    },
    // save submit
    save() {
      if (!this.disabled) {
        this.disabled = true
        this.loading = true
        api.Merchant.submitPay({
          id: this.merchantId,
          amount: this.amount
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (+data.amount === 0) {
            return this.$createToast({
              type: 'correct',
              time: 1000,
              txt: '支付成功',
              onTimeout: () => {
                this.$router.push('/center')
              }
            }).show()
          }
          const serial = {
            merchant_order_id: data.merchant_order_id
          }
          this.$router.push(`/pay/${base64.encode(serial)}`)
        }).finally(() => {
          this.loading = false
          this.disabled = false
        })
      }
    },
    // submit
    submit() {
      if (+this.amount < this.mini) {
        return this.$createToast({
          type: 'error',
          time: 1000,
          txt: '最低支付金额为:￥' + this.mini
        }).show()
      }
      if (this.ticket >= +this.amount) {
        this.checkPayPassword()
      } else {
        this.save()
      }
    }
  },
  created () {
    this.merchantId = Number.parseInt(this.$route.params.id || 0)
    this.fetchData()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.amount.focus()
    })
  }
}
</script>

<style scoped lang="stylus">
.merchant-pay
  padding-top 45px
  .pay
    background white
    padding 10px
    margin 10px
    border-radius 10px
    min-height 300px
    .title
      height 45px
      line-height 45px
      font-weight 700
      font-size 16px
    .submit
      background $main_color
      display inline-block
      padding 10px 25px
      border-radius 5px
      font-weight 700
      &.disabled
        background #ccc
        color #eee
    .mini
      margin 20px
    .amount
      padding 50px 20px
      display flex
      justify-items center
      .text
        width 120px
        //background red
        line-height 40px
        text-align right
      .value
        flex 1
        padding-right 50px
        padding-left 10px
        //background blue
    .desc
      margin-top 100px
      margin-bottom 30px
      p
        height 20px
        text-align left
</style>
